<template>
  <button @click="visible = !visible">切换</button>
  <XtxDialog title="切换收货地址" v-model="visible">
    <div>
      <p>vue2</p>
      <p>vue3</p>
    </div>

    <template #footer>
      <button>测试按钮</button>
    </template>

  </XtxDialog>

  <!-- <XtxMessage type="warning">添加成功</XtxMessage>

<div id="div"></div> -->
</template>

<script setup lang="ts">
import Message from "@/components/XtxMessage";
import { ref } from 'vue';
const visible = ref(false)
/* Message({
  type: "warning",
  text: '你好~~~~~~',
  duration: 5000
}) */
Message.success("你好~~~~~~OK");
// // h 等价于 createVNode
// // createVNode: 作用：创建虚拟DOM  (一个js对象, 可以模拟真实dom结构)
// import { h, onMounted, render } from 'vue'
// // 参数1：创建的虚拟DOM的节点类型  比如  div h1  a  img
// // 参数2：虚拟DOM拥有的属性，是一个对象
// // 参数3：虚拟DOM节点的内容

// // <h1 title="标题" id="box" class="aa">我是标题</h1>
// const vNode = h('h1', { title: '标题', id: 'box', className: 'aa' }, '我是标题')

// onMounted(() => {

//   const div = document.getElementById('div')
//   if(div){
//     console.log(div, vNode)
//     // render 把虚拟dom渲染到容器中(真实的dom)
//     render(vNode, div)
//     // render(messsage组件, dom元素)
//   }
// })
</script>
